<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			:root {
				/* 定义RGB变量 */
				--red: 44;
				--green: 135;
				--blue: 255;
				/* 文字颜色变色的临界值，建议0.5~0.6 */
				--threshold: 0.5;
				/* 深色边框出现的临界值，范围0~1，推荐0.8+*/
				--border-threshold: 0.8;
			}

			#box {
				width: 800px;
				height: 230px;
				border: 1px solid gainsboro;
				background-color: antiquewhite;
				overflow: hidden;
			}

			#rgb {
				width: 300px;
				height: 100px;
				text-align: center;
				margin: 20px auto;
				line-height: 100px;
				border: 1px solid #cccccc;
				/* rgb这个盒子的背景颜色由这三个颜色的值改变 */
				background-color: rgb(var(--red), var(--green), var(--blue));
				/* calc()`函数用语动态计算长度值 */
				--r: calc(var(--red) * 0.2126);
				--g: calc(var(--green) * 0.7152);
				--b: calc(var(--blue) * 0.0722);
				/* 三个颜色加起来 */
				--sum: calc(var(--r) + var(--g) + var(--b));
				/* 计算高亮 */
				--lightness: calc(var(--sum) / 255);
				/* --lightness=(red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255; */
				color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -99999%));
			}

			p {
				/* 浮动 */
				float: left;
				width: 250px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="rgb"></div>
			<p style="color: red; font-weight: 700;">R：<input type="range" min="0" max="255" value="44" name="red" id="r"></p>
			<p style="color: green; font-weight: 700;">G：<input type="range" min="0" max="255" value="135" name="green" id="g"></p>
			<p style="color: blue; font-weight: 700;">B：<input type="range" min="0" max="255" value="255" name="blue" id="b"></p>
		</div>
		<script type="text/javascript">
			//获取到这些元素或者元素值
			var rgb = document.getElementById('rgb');
			var red = document.getElementById('r').value;
			var green = document.getElementById('g').value;
			var blue = document.getElementById('b').value;
			//rgb括号的值
			rgb.innerHTML = "rgb(" + red + "," + green + "," + blue + ")";
			//获取按钮
			var colors = document.querySelectorAll('input');
			console.log(colors);
			//forEach循环RGB
			colors.forEach(function(e) {
				//addEventListener添加
				e.addEventListener('input', function() {
					var red = document.getElementById('r').value;
					var green = document.getElementById('g').value;
					var blue = document.getElementById('b').value;
					//rgb盒子的颜色
					rgb.style.background = "rgb(" + red + "," + green + "," + blue + ")";
					//显示rgb括号里的值
					rgb.innerHTML = "rgb(" + red + "," + green + "," + blue + ")";
					// var div = document.getElementById('div')
					//设定属性
					rgb.style.setProperty('--' + this.name, this.value);
				})
			})
		</script>
	</body>
</html>
